<template>
    <div>
        <myheader/>
        <p>用户中心</p>
        {{user.username}}<br>
        手机号{{user.mobile | mobilefilter}}<br>
        头像
        <van-image
        width="100"
        height="100"
        :src="url"
      />
        上传头像<van-uploader :after-read="upload" />

        多文件上传控件:
        <van-uploader v-model="filelist" multiple :max-count="2" :after-read="uploadnum" />
    </div>
</template>

<script>
import myheader from '@/components/myheader'

    export default {
        data(){
            return{
                user:{},
                url:'',
                userid:localStorage.getItem('userid'),
                filelist:[],
                
            }
        },
        filters:{
            // 手机号隐藏中间6位
            mobilefilter(value){
                if(value){
                     return value.slice(0,3)+'******'+value.slice(-3,-1)
                }
                else{
                    return value
                }
               
            }
        },
        methods:{
            getUserinfo(){
                this.$axios.get('users/getuserinfo?userid='+this.userid).then(res=>{
                    this.user = res.data.user
                    this.url = this.upload_dir+this.userid+'/'+res.data.user.avater
                })
                },
            upload(file){
                // 此时可以自行将文件上传至服务器
                let data = new FormData()
                data.append('file',file.file)
                data.append('userid',this.userid)
                this.$axios.post('users/upload',data).then(res=>{
                    this.url = this.upload_dir+this.userid+'/'+res.data.filename
                })
            },
            beforeRead(file){
                if(file.type!=='image/jpeg'){
                    alert('请上传jpg格式图片');
                    return false
                }
                return true
            },
            //多文件上传控件
            uploadnum(){
                // 遍历filelist this.filelist.length列表长度 i++自增
                for(var i=0;i<this.filelist.length;i++){
                    let file=this.filelist[i]
                    // console.log(file)
                    // 调用上传接口上传每一个
                    this.upload(file)
                }
            },
            },
        mounted(){
            this.getUserinfo()
        },
        components: { myheader },
        
    }
</script>

<style scoped>

</style>